<template>
	<view class="app">
		<view class="man-tab">
			<zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs" :defaultColor='defaultColor'
			 :activeColor="activeColor" :acsize="acsize">
			</zzx-tabs>
		</view>
		<view>
			<view class="app-content">
				<view class="bann">
					<image src='/static/img/yijian_bann.png' class="bann_img" mode="widthFix"></image>
					<view class="bann_text">
						<view class="bann_title" style="color: #2B2A29;font-size: 15px;">今日指导价</view>
						<view class="bann_title" style="color: #2B2A29;font-weight: bold;font-size: 18px;padding-top: 5px;">{{priceArea.min || 0}}-{{priceArea.max || 0}}元/公斤</view>
					</view>
					<!-- <image :src="catIcon || '/static/img/feizhi.png'" class="bann_img2"></image> -->
				</view>
				<view>
					<view class="app-money">
						<view class="money-left">
							<view class="stats-text"><text class="linepice"></text>回收参考价
							</view>
						</view>
						<view style="display: flex;align-items: center;">
							<view class="money-right" @click="getLocation()">
								<text v-if="area">{{area}}</text>
								<text v-else>刷新位置</text>
								<!-- <image src='/static/img/top_icon.png' class="right-img"></image> -->
							</view>
							<view v-if="!streetid" @click="chooseStreet" class="choose-street">
								选择街道
							</view>
						</view>
					</view>
				</view>
				<view class="app-good">
					<view v-for="(item,index) in areapriceList" :key="index">
						<view class="order-time" @click="showWeight(item)">
							<view class="time-text">
								<image src='/static/img/jian_icon.png' v-if="weightArr.length>0 && weightArr.join('').indexOf(item.id) != -1"
								 class="good-img"></image>
								<image src='/static/img/add_icon.png' v-else class="good-img"></image>
								{{item.name}}
							</view>
							<view class="time-num">{{item.price}}/公斤</view>
						</view>
						<view class="app-weight" v-if="weightArr.length>0 && weightArr.join('').indexOf(item.id) != -1">
							<view class="stats-text"><text class="linepice"></text>选择预估重量
							</view>
							<view class="wei-body">
								<view v-for="(i,idx) in item.type" :key="idx" :class="i.weiShow?'wei-itme weiActive':'wei-itme'" @click="chooseWei(item,i)">{{i.name}}</view>
							</view>
						</view>
					</view>
					<!-- <view>
						<view class="order-time" v-for="(item,index) in areapriceList" @click="open(item)" :key="index">
							<view class="time-text">
								<image src='/static/img/add_icon.png' class="good-img"></image>
								{{item.name}}
							</view>
							<view class="time-num">{{item.price}}/公斤</view>
						</view>
					</view> -->
				</view>
				<view class="app-prompt">
					<image src="/static/img/tishi_icon.png" class="prom-img"></image>
					温馨提示
					<view class="prom-text">1.因回收成本原因，社区，写字楼，单元楼价格面议；</view>
					<view class="prom-text">2.小于10公斤暂不保证上门回收</view>
				</view>
				<view class="app-time">
					<view class="stats-text"><text class="linepice"></text>预约时间
					</view>
					<view class="door-wrapper">
						<view :class="recyclingType == 1 ? 'time-door select':'time-door'" @click="changeTab(1)">尽快上门</view>
						<view :class="recyclingType == 2 ? 'select time-input':'time-input'" @click="changeTab(2)">
							<view class="value" style="height: 68upx;display: flex;align-items: center;justify-content: center;">
								<biaofun-datetime-picker ref="datetime" placeholder="预约时间" :defaultValue="defaultValue" start="2000-02-03 02:08"
								 end="2100-10-28 22:58" fields="minute" @change="changeDatetimePicker"></biaofun-datetime-picker>
								<!-- <image src="/static/img/top_icon.png" class="right-img"></image> -->
							</view>

							<!-- <view>选择预约时间</view> -->
						</view>
					</view>
				</view>

				<view class="order-time" style="margin: 16px 0;padding: 9px 7px;align-items: center;">
					<view class="address-text">
						回收地址 </view>
					<view class="time-num" style="color: rgba(137, 137, 137, 1);font-size: 13px;font-weight: normal;" @click="hanldAddAddress()">
						{{recycly_address || "请选择地址"}}
						<image src="/static/img/right_icon.png" class="right-img"></image>
					</view>
				</view>

				<view class="par-tar" id="remark">
					<view class="iphone-text">留言备注：</view>
					<textarea v-if="popupHide" rows="1" cols="2" v-model="info" placeholder="请输入备注留言" maxlength="130" style="font-size: 14px;height: 100px;width: 242px;">
					</textarea>
					<view style="font-size: 14px;" v-if="!popupHide">{{info || '请输入备注留言'}}</view>
				</view>

			</view>
		</view>
		<view class="appbut">
			<view class="but-he" @click="open">
				<image src='/static/img/hezi_icon11.png' class="he-img"></image>
				<view class="but-num" v-if="shoppingcartnum>0">{{shoppingcartnum}}</view>
				<view class="but-cash">合计：<text style="font-size: 18px;font-weight: bold;">¥{{total || 0}}</text></view>
			</view>
			<view class="appbut-ok" @click="hanldBookNow()">一键回收</view>
		</view>

		<!--商品栏-->
		<uni-popup ref="recash" type="bottom" style="z-index: 9999999999;background-color: #fff;">
			<view class="cash">
				<image @click="closeRecash()" src="/static/img/guanbi_icon.png" class="cash-guan"></image>
				<view class="cash-header">
					<view class="stats-text" style="padding: 20px 0;justify-content: center;justify-items: center;"><text class="linepice"></text>回收类目</text>
					</view>
				</view>
				<view class="order-subject">
					<view class="sub-item" v-for="(item,index) in shoppingcartarr" :key="index">
						<view class="sub-child">
							<image :src="item.icon || '/static/img/feizhi.png'" class="sub-img"></image>
							<view class="sub-con">
								<view style="color: rgba(36, 36, 36, 1);font-size: 15px;font-weight: bold;">{{item.name}}</view>
								<view style="color: rgba(36, 36, 36, 1);padding-top: 12px;">参考单价：¥{{item.price}}/公斤</view>
								<view style="color: rgba(36, 36, 36, 1);">预估重量：{{item.weiMin}}-{{item.weiMax}}公斤</view>
							</view>
							<image src="/static/img/jian_icon.png" @click="delCart(item)" class="add_img"></image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!--立即预约-->
		<uni-popup ref="recash2" type="bottom" style="z-index: 9999999999;background-color: #fff;">
			<view class="cash2">
				<image src="/static/img/guanbi_icon.png" class="cash-guan2"></image>
				<image src="/static/img/feizhi.png" class="cash-fei2"></image>
				<view class="cash-wrapper2">
					<view class="cash-item2">
						<view class="cash-left2">回收类型</view>
						<view class="cash-right2">统纸（纯黄纸，纯花纸混合一块）</view>
					</view>
					<view class="cash-item2">
						<view class="cash-left2">预估重量</view>
						<view class="cash-right2">10-25公斤</view>
					</view>
					<view class="cash-item2">
						<view class="cash-left2">预约时间 </view>
						<view class="cash-right2">2020-12-12 12:00</view>
					</view>
					<view class="cash-item2">
						<view class="cash-left2">回收地址</view>
						<view class="cash-right2">湖南省长沙市长沙县麓谷工业园</view>
					</view>
				</view>
				<view class="cash-num2">
					合计：<text style="color: rgba(70, 103, 240, 1);">≈128.00</text>
				</view>
			</view>
			<view class="cash-but2">确定</view>
		</uni-popup>

		<!--公益赠送-->
		<uni-popup ref="recash3" type="bottom" style="z-index: 9999999999;background-color: #fff;">
			<view class="cash3">
				<image src="/static/img/gongyi.png" class="gongyi"></image>
				<view class="cash-text3">感谢您对环保公益事业的支持！</view>
			</view>
			<view class="cash-but3">
				<view class="but-left3">
					取消
				</view>
				<view class="but-right3">
					确定
				</view>
			</view>
		</uni-popup>
		<!--街道-->
		<uni-popup ref="recashstreet" type="bottom" style="z-index: 9999999999;">
			<view class="cash-street">
				<view class="cash2-con">
					<view class="cash2-title" v-if="area">当前城市：{{area}}</view>
					<view class="cash2-tip" v-if="streetList.length >= 7">(温馨提示：下拉显示更多)</view>
					<scroll-view scroll-y show-scrollbar>
						<view class="cash2-list">
							<view class="list-item" v-for="(item,index) in streetList"  @click="confirmStreet(item)" :key="index">{{item.name}}</view>
						</view>
					</scroll-view>
				</view>
		
				<!-- <view class="cash-but3">
					<view class="but-left3">
						取消
					</view>
					<view class="but-right3">
						确定
					</view>
				</view> -->
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
	//
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	//
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue';
	let timer;
	export default {
		data() {
			return {
				show_index: 0, //页面设置
				items: [],
				current: 0,
				defaultColor: '#000000',
				activeColor: '#FF6001',
				acsize: '14px',
				defaultValue: "", // 默认值

				areaid: '110101',
				cat: '',
				catIcon: '',
				garbagecateList: [],
				areapriceList: [],
				priceArea: '',
				clickType: 0,
				city: '',
				district: '',
				area:'',

				recycly_address: '',
				weightArr: [], //显示隐藏重量

				chooseWeiArr: [], //选择的重量

				shoppingcartnum: 0,
				shoppingcartarr: [],

				info: '',
				recyclyTime: '', //回收时间

				popupHide: true, //弹框出现隐藏textarea输入框
				recyclingType: 1,
				catIcon: '',
				streetid:'',
				
				streetList:[],
			}
		},
		components: {
			zzxTabs,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			biaofunDatetimePicker
		},
		onPageScroll(e) {
			var _this = this
			this.$nextTick(() => {
				uni.getSystemInfo({
					success: (resu) => {
						let height = resu.windowHeight - 48 - 20
						const query = uni.createSelectorQuery()
						query.select('#remark').boundingClientRect()
						query.selectViewport().scrollOffset()
						query.exec(function(res) {
							console.log(res[0].top)
							if (res[0].top <= height) {
								_this.popupHide = true;
							} else {
								_this.popupHide = false
							}
						})
					},
					fail: (res) => {}
				})
			})
		},
		onLoad: function(options) {
			if (options.current) {
				this.current = Number(options.current);
			}
			//测试用，正式版本要注释
			// this.getGarbagecate();

			if (!getApp().globalData.address) {
				this.getAddressList();
			}
		},
		onShow() {
			this.recycly_address = '';
			this.recycly_address = getApp().globalData.address
			console.log(this.recycly_address)
			
			if(getApp().globalData.areaAddress){
				this.area = getApp().globalData.areaAddress;
			}
			if(getApp().globalData.areaPosition){
				let position = JSON.parse(getApp().globalData.areaPosition)
				this.getgeocoder(position.longitude, position.latitude)
			}
		},
		onReady: function() {
			console.log('onReady')
			let that = this;
			this.getLocation();
			//textarea超出隐藏
			this.$nextTick(() => {
				uni.getSystemInfo({
					success: (resu) => {
						console.log(resu.windowHeight)
						let height = resu.windowHeight - 48 - 20
						const query = uni.createSelectorQuery()
						query.select('#remark').boundingClientRect()
						query.selectViewport().scrollOffset()
						query.exec(function(res) {
							console.log(res[0].top)
							if (res[0].top > height) {
								that.popupHide = false;
							}
						})
					},
					fail: (res) => {}
				})
			})
		},
		computed: {
			total() {
				let minTotal = 0,
					maxTotal = 0
				if (this.shoppingcartarr.length > 0) {
					this.shoppingcartarr.forEach((val) => {
						minTotal += val.price * val.weiMin
						maxTotal += val.price * val.weiMax
					})
				}
				if (maxTotal == 0) {
					return 0
				}
				return (minTotal).toFixed(2) + '~' + (maxTotal).toFixed(2)
			}
		},
		methods: {
			getStreet(id){
				this.$http.getstreet({id:id}).then(res => {
					console.log(res)
					this.streetList = res.data
				})
			},
			chooseStreet(){
				this.$refs.recashstreet.open()
			},
			//确认选择街道
			confirmStreet(item){
				this.$refs.recashstreet.close()
				this.area = uni.getStorageSync('city')+uni.getStorageSync('district') + item.name
				this.getprice(item.id);
				setTimeout(() => {
					this.getareaprice(item.id);
				}, 50)
			},
			getLocation(){
				let that = this
				uni.showLoading({})
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						uni.hideLoading({})
						//地址未变不拉取geocoder接口  接口有限制
						if (!(uni.getStorageSync('longitude') == res.longitude && uni.getStorageSync('latitude') == res.latitude)) {
							that.getgeocoder(res.longitude, res.latitude)
						} else {
							that.area = uni.getStorageSync('city')+uni.getStorageSync('district')+uni.getStorageSync('street')
							that.areaid = uni.getStorageSync('adcode')
							that.streetid = uni.getStorageSync('streetid')
							that.getGarbagecate();
							that.getStreet(that.areaid)
						}
						uni.setStorageSync('longitude', res.longitude)
						uni.setStorageSync('latitude', res.latitude)
					},
					fail(err){
						// wx.showModal({
						// 	content:"getLocation fail====" + JSON.stringify(err),
						// 	confirmText: "确认",
						// 	showCancel:false,
						// 	success: (res) => {
						// 		//点击“确认”时打开设置页面
						// 		if (res.confirm) {} else {}
						// 	}
						// });
						uni.hideLoading({})
						wx.getSetting({
						    success: (res)=>{
						        if(!res.authSetting['scope.userLocation']){
									wx.showModal({
										content: "检测到您没有授权定位，将无法下单，是否去设置打开？",
										confirmText: "确认",
										cancelText: "取消",
										success: (res) => {
											//点击“确认”时打开设置页面
											if (res.confirm) {
												wx.openSetting({
													success: (res) => {
														uni.getLocation({
															type: 'wgs84',
															success: function(res) {
																if (!(uni.getStorageSync('longitude') == res.longitude && uni.getStorageSync('latitude') == res.latitude)) {
																	that.getgeocoder(res.longitude, res.latitude)
																} else {
																	that.area = uni.getStorageSync('city') + uni.getStorageSync('district')+uni.getStorageSync('street')
																	that.areaid = uni.getStorageSync('adcode')
																	that.streetid = uni.getStorageSync('streetid')
																	that.getGarbagecate();
																	that.getStreet(that.areaid)
																}
																uni.setStorageSync('longitude', res.longitude)
																uni.setStorageSync('latitude', res.latitude)
															},
														})
													}
												})
											} else {
												wx.showToast({
													title: '取消授权定位',
													icon: 'none'
												});
												console.log('用户点击取消')
											}
										}
									});
								}
						    }
						})
					}
				})
			},
			eventDatetimePicker() {
				console.log(this.$refs.datetime)
				this.$refs.datetime.change()
			},
			//日期更换
			changeDatetimePicker(e) {
				console.log('changeDatetimePicker')
				this.recyclyTime = e.f3
			},
			//获取默认回收地址
			getAddressList() {
				this.$http.address().then((res) => {
					console.log(res)
					if (res.code == 0) {
						if (res.data && res.data.length > 0) {
							res.data.forEach((val) => {
								if (val.is_default == 2) {
									this.recycly_address = val.address
									this.recycly_address_id = val.id
								}
							})
						}
					}
				})
			},
			//尽快上门
			changeTab(type) {
				this.recyclingType = type
				let date = new Date()
				date.setMinutes(date.getMinutes() + 5)
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let day = date.getDate();
				let hour = date.getHours();
				let min = date.getMinutes();
				this.recyclyTime = y + '-' + m + '-' + day + ' ' + hour + ':' + min
			},
			//显示重量
			showWeight(item) {
				console.log(this.weightArr)
				if (this.weightArr.length > 0 && this.weightArr.join('').indexOf(item.id) != -1) {
					this.weightArr.splice(this.weightArr.join('').indexOf(item.id), 1)
				} else {
					this.weightArr.push(item.id)
				}
			},

			delCart(item) {
				this.shoppingcartarr.forEach((val, key) => {
					if (val.id == item.id) {
						this.shoppingcartarr.splice(key, 1)
					}
				})

				this.areapriceList.forEach((val) => {
					if (val.id == item.id) {
						val.type.forEach((v) => {
							if (v.type == item.type) {
								this.$set(v, 'weiShow', false)
								this.shoppingcartnum -= 1
							}
						})
					}
				})
			},
			//经纬度获取区域信息
			getgeocoder(longitude, latitude) {
				let params = {
					lat: latitude,
					lng: longitude
				}
				this.$http.geocoder(params).then(res => {
					console.log(res)
					this.area = res.data.city + res.data.district + res.data.street_title
					this.areaid = res.data.adcode
					this.streetid = res.data.street
					uni.setStorageSync('street', res.data.street_title)
					uni.setStorageSync('streetid', res.data.street)
					uni.setStorageSync('city', res.data.city)
					uni.setStorageSync('district', res.data.district)
					uni.setStorageSync('adcode', this.areaid)
					this.getGarbagecate();
					if(!this.streetid){
						this.getStreet(this.areaid)
					}
				})
			},
			//选择重量
			chooseWei(item, i) {
				let num = 0
				let chooseArr = []
				this.areapriceList.forEach((val) => {
					if (val.id == item.id) {
						val.type.forEach((v) => {
							if (v.type == i.type) {
								this.$set(v, 'weiShow', i.weiShow ? false : true);
							} else {
								this.$set(v, 'weiShow', false);
							}
						})
					}
				})

				this.areapriceList.forEach((val) => {
					val.type.forEach((v) => {
						if (v.weiShow) {
							num = num + 1
							chooseArr.push({
								icon: val.icon,
								id: val.id,
								type: v.type,
								name: val.name,
								price: val.price,
								weiMin: v.mintotal,
								weiMax: v.maxtotal,
							})
						}
					})
				})

				this.shoppingcartarr = chooseArr
				this.shoppingcartnum = num
				console.log(num)

				// if(this.chooseWeiArr.length > 0 && this.chooseWeiArr.join('').indexOf(item.type) != -1){
				// 	this.chooseWeiArr.splice(this.chooseWeiArr.join('').indexOf(item.type),1)
				// }else{
				// 	this.chooseWeiArr.push(item.type)
				// }
			},
			//分类类别
			getGarbagecate() {
				this.items = []
				this.$http.garbagecate().then(res => {
					if (res.data && res.data.length > 0) {
						this.garbagecateList = res.data
						res.data.forEach((val, key) => {
							this.items.push(val.name)
							if (this.current == key) {
								this.cat = val.id
								this.catIcon = val.icon
								this.getprice();
								setTimeout(() => {
									this.getareaprice();
								}, 50)
							}
						})
					}
				})
			},
			//获取区域价格、规格
			getareaprice(streetid) {
				let params = {
					areaid: streetid?streetid:this.streetid,
					cat: this.cat
				}
				this.$http.areaprice(params).then(res => {
					if (res.data && res.data.length > 0) {
						this.areapriceList = res.data
					}
				})
			},
			//今日指导价
			getprice(streetid) {
				let params = {
					areaid: streetid?streetid:this.streetid,
					cat: this.cat
				}
				this.$http.get_price(params).then(res => {
					if (res.code == 0) {
						this.priceArea = res.data
					}
				})
			},
			//切换回收类型
			onClickItem(e) {
				//切换回收类型清空数据
				this.areapriceList = []
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					this.garbagecateList.forEach((val, key) => {
						if (key == e.currentIndex) {
							this.cat = val.id
							this.catIcon = val.icon
							this.getprice();
							setTimeout(() => {
								this.getareaprice();
							}, 50)
						}
					})
				}
			},
			areaMap(){
				uni.navigateTo({
					url: `/pages/index/areamap`
				})
			},
			//返回
			hanldLeft() {
				uni.navigateTo({
					url: `/pages/index/index`
				})
			},
			closeRecash() {
				this.$refs.recash.close()
				setTimeout(() => {
					this.popupHide = true
				}, 300)
			},
			open() {
				this.$refs.recash.open()
				setTimeout(() => {
					this.popupHide = false
				}, 300)
			},
			open2() {
				this.$refs.recash2.open()
			},
			open3() {
				console.log('aa')
				this.$refs.recash3.open()
			},
			hanldBookNow() {
				if (this.shoppingcartarr.length == 0) {
					uni.showToast({
						title: '请选择预估重量',
						icon: 'none'
					})
					return
				}
				//尽快上门
				if (this.recyclingType == 1) {
					let date = new Date()
					date.setMinutes(date.getMinutes() + 5)
					let y = date.getFullYear();
					let m = date.getMonth() + 1;
					let day = date.getDate();
					let hour = date.getHours();
					let min = date.getMinutes();
					this.recyclyTime = y + '-' + m + '-' + day + ' ' + hour + ':' + min
				}
				if (!(this.defaultValue || this.recyclyTime)) {
					uni.showToast({
						title: '请选择回收时间',
						icon: 'none'
					})
					return
				}
				if (!(getApp().globalData.address_id || this.recycly_address_id)) {
					uni.showToast({
						title: '请选择回收地址',
						icon: 'none'
					})
					return
				}
				let data = {
					addressid: getApp().globalData.address_id ? getApp().globalData.address_id : this.recycly_address_id,
					address: getApp().globalData.address ? getApp().globalData.address : this.recycly_address,
					total: this.total,
					appointment: this.recyclyTime ? this.recyclyTime : this.defaultValue,
					data: JSON.stringify(this.shoppingcartarr),
					ispublic: 1,
					info: this.info
				}
				console.log(data)

				let params = {
					addressid: getApp().globalData.address_id ? getApp().globalData.address_id : this.recycly_address_id
				}
				this.$http.canOrder(params).then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.navigateTo({
							url: '/pages/index/bookNow?data=' + JSON.stringify(data)
						})
					}
				})


			},
			hanldAddAddress() {
				uni.navigateTo({
					url: "/pages/member/addressList"
				})
			}
		}
	}
</script>



<style scoped>
	.linepice{
		width: 24upx;height: 8upx;background: #2B2A29;border-radius: 8upx;display: block;margin-right: 5px;
	}
	.user-header {
		text-align: center;
		position: relative;
		height: 44px;
		font-size: 16px;
		color: #111110;
		font-weight: bold;
		line-height: 44px;
		position: fixed;
		width: 100%;
		background-color: #fff;
		/* padding-bottom: 100px; */
		z-index: 9999;
	}

	.user-img {
		width: 30px;
		height: 30px;
		position: absolute;
		left: 0;
		top: 10px;
	}

	.app {
		width: 100%;
		height: 100%;
		margin-bottom: 100px;
	}

	.man-tab {
		background-color: rgba(187, 187, 187, 0.1);
		padding: 5px 0;
	}

	.app>>>.zzx-tabs .zzx-tabs-bar .zzx-bottom-line {
		background-color: #FF6001;
	}

	.app>>>.uni-popup {
		z-index: 9999 !important;
	}

	.stats-text {
		font-size: 16px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.st-line {
		width: 160upx;
		height: 6upx;
		background: rgb(233, 241, 255);
		margin-left: 20upx;
	}

	.bann {
		padding: 20px 0px 0 0px;
		position: relative;
	}

	.app-content {
		padding: 0 15px;
	}

	.bann_img {
		width: 100%;
	}

	.bann_text {
		position: absolute;
		top: 36px;
		left: 100px;
		color: #fff;
	}

	.bann_title {
		font-size: 36upx;
		font-family: hzgb;
		color: rgba(255, 255, 255, 1);
	}

	.bann_img2 {
		height: 50px;
		width: 50px;
		position: absolute;
		top: 35px;
		right: 20px;
	}

	.app-money {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.money-right {
		/* display: flex;
		flex-direction: row; */
		padding-right: 10px;
	}

	.right-img {
		width: 27px;
		height: 27px;
		vertical-align: middle;
	}

	.order-time {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: rgba(187, 187, 187, 0.1);
		padding: 13px 7px;
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.time-text {
		color: #343633;
		font-size: 13px;
		font-weight: bold;
	}

	.time-num {
		color: #FF6001;
		font-size: 13px;
		font-weight: bold;
	}

	.good-img {
		width: 19px;
		height: 19px;
		vertical-align: bottom;
		margin-right: 10px;
	}

	.app-prompt {
		background-color: rgba(187, 187, 187, 0.1);
		padding: 10px 15px 18px 15px;
		color: rgba(52, 54, 51, 1);
		font-size: 13px;
		font-weight: bold;
	}

	.prom-img {
		width: 20px;
		height: 20px;
		vertical-align: bottom;
		margin-right: 5px;
	}

	.prom-text {
		color: rgba(255, 37, 18, 1);
		padding-top: 10px;
	}

	.stats-text {
		padding: 11px 0 14px 0;
	}

	.door-wrapper {
		display: flex;
		flex: 2;
		align-items: center;
		justify-content: flex-end;

	}

	.time-door {
		background-color: rgba(187, 187, 187, 0.1);
		height: 68upx;
		color: #242424;
		text-align: center;
		line-height: 68upx;
		width: 45%;
		border: 1px solid #E9F1FF;
		border-radius: 20px 0px 0 20px;
		font-weight: bold;
		border-right: none;
	}

	.time-door.select {
		color: #FFFFFF;
		height: 68upx;
		

background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
	}

	.time-input.select {
		color: #FFFFFF;
		height: 70upx;
		

background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
	}

	.time-input {
		display: flex;
		border: 1px solid #E9F1FF;
		border-left: none;
		border-radius: 0px 20px 20px 0px;
		align-items: center;
		width: 45%;
		background-color: rgba(187, 187, 187, 0.1);
		color: rgba(36, 36, 36, 1);
		height: 68upx;
	}

	.time-input .value {
		width: 100%;
		position: relative;
		z-index: 200;
	}

	.appbut {
		border-radius: 25px;
		height: 96upx;
		
background: #2B2A29;
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index: 1000;
		border: 1px solid #979797;
	}

	.he-img {
		width: 30px;
		height: 33px;
	}

	.but-he {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #fff;
		font-size: 15px;
		position: relative;
		padding: 0 56upx;
		height: 96upx;
	}

	.but-num {
		width: 18px;
		height: 18px;
		line-height: 18px;
		background: rgba(254, 71, 68, 1);
		border-radius: 50%;
		position: absolute;
		text-align: center;
		left: 48px;
		top: 3px;
	}

	.but-cash {
		margin-left: 10px;
		color: #fff;
	}

	.appbut-ok {
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		width: 220upx;
		height: 96upx;
		border-radius:0 25px 25px 0px;
	

background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		line-height: 96upx;
	}

	/*重量*/

	.wei-body {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.wei-itme {
		width: 200upx;
		height: 58upx;
		background: rgba(187, 187, 187, 0.1);
		border-radius: 11upx;
		border: 1px solid rgba(151, 151, 151, 1);
		text-align: center;
		line-height: 58upx;
		margin-right: 20upx;
		margin-bottom: 13px;
	}

	.weiActive {
		

background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		color: #FFFFFF;
		border: none;
		

box-shadow: 0px 4px 8px 0px #FFAB71;
	}

	/*商品栏弹框*/
	.cash {
		height: 940upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 25px 25px 0px 0;
	}

	.cash-guan {
		width: 46upx;
		height: 46upx;
		position: absolute;
		right: 40upx;
		top: 42upx;
	}

	.cash-header {
		border-bottom: 1px solid rgba(217, 217, 219, 1);
		text-align: center;
	}

	.order-subject {
		display: flex;
		flex-direction: column;
		height: 660upx;
		overflow: scroll;
	}

	.sub-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 20px;
		border-bottom: 1px solid #EDEDED
	}

	.sub-img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}


	.sub-child {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}

	.sub-con {
		flex: 1;
		padding-left: 16px;
	}

	.add_img {
		width: 28px;
		height: 28px;
		margin-top: 70upx;
	}

	/*立即预约弹框*/
	.cash2 {
		height: 750upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 25px 25px 0px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px 15px;
	}

	.cash-guan2 {
		width: 46upx;
		height: 46upx;
		position: absolute;
		right: 40upx;
		top: 42upx;
	}

	.cash-fei2 {
		width: 50px;
		height: 50px;
	}

	.cash-wrapper2 {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-top: 14px;
	}

	.cash-item2 {
		height: 92upx;
		background: rgba(187, 187, 187, 0.1);
		border-radius: 10upx;
		align-items: center;
		justify-content: space-between;
		display: flex;
		flex-direction: row;
		margin-bottom: 6px;
		padding: 0 12px;
	}

	.cash-left2 {
		color: rgba(52, 54, 51, 1);
		font-size: 14px;
	}

	.cash-right2 {
		color: rgba(36, 36, 36, 1);
		font-size: 15px;
		font-weight: bold;
	}

	.cash-num2 {
		margin: 20px 0;
		color: rgba(20, 16, 16, 1);
		font-size: 18px;
		font-weight: bold;
	}

	.cash-but2 {
		width: 750upx;
		height: 96upx;
		

background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		

box-shadow: 0px 4px 8px 0px #FFAB71;
		border-radius: 48upx;
		text-align: center;
		font-size: 16px;
		line-height: 96upx;
		font-weight: bold;
		position: fixed;
		bottom: 0;
		color: #FFFFFF;
	}

	/*公益赠送*/

	.cash3 {
		height: 750upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 25px 25px 0px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px 15px;
	}

	.gongyi {
		height: 400upx;
		width: 545upx;
		margin: 73upx 0 43upx 0;
	}

	.cash-text3 {
		color: rgba(52, 54, 51, 1);
		font-size: 16px;
		font-weight: bold;
	}

	.cash-but3 {
		display: flex;
		flex-direction: row;
		position: fixed;
		bottom: 0;
		justify-content: space-between;
		width: 100%;
	}

	.but-left3 {
		background-color: rgba(211, 212, 217, 1);
		width: 50%;
		height: 48px;
		text-align: center;
		font-size: 16px;
		color: rgba(57, 61, 84, 1);
		font-weight: bold;
		line-height: 48px;
	}

	.but-right3 {
		

background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		

box-shadow: 0px 4px 8px 0px #FFAB71;
		width: 50%;
		height: 48px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		font-weight: bold;
		line-height: 48px;
	}


	.par-tar {
		display: flex;
		align-items: flex-start;
		background-color: rgba(187, 187, 187, 0.1);
		height: 100px;
		border-radius: 5px;
		padding: 12px 0;
	}

	.uni-textarea-placeholder {
		font-size: 12px;
		color: #898989;
	}

	.iphone-text {
		color: #242424;
		font-size: 14px;
		padding: 0 12px;
		min-width: 160upx;
		margin-top: -2px;
	}

	.address-text {
		color: #242424;
		font-size: 13px;
		padding-left: 5px;
	}

	.app-time {
		display: flex;
		margin-top: 10px;
	}
	.choose-street{
		color: #fff;
		background-color:#FF6001;
		padding: 3px 5px;
		border-radius: 5px;
	}
	
	/*街道*/
	.cash-street {
		height: 942upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 25px 25px 0px 0;
	}
	
	.cash-but3 {
		display: flex;
		flex-direction: row;
		position: fixed;
		bottom: 0;
		justify-content: space-between;
		width: 100%;
	}
	
	.but-left3 {
		background-color: rgba(211, 212, 217, 1);
		width: 50%;
		height: 48px;
		text-align: center;
		font-size: 16px;
		color: rgba(57, 61, 84, 1);
		font-weight: bold;
		line-height: 48px;
	}
	
	.but-right3 {
		

background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		

box-shadow: 0px 4px 8px 0px #FFAB71;
		width: 50%;
		height: 48px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		font-weight: bold;
		line-height: 48px;
	}
	
	.cash2-title {
		font-weight: bold;
		font-size: 16px;
		text-align: center;
		padding: 25px 0 10px 0;
	}
	.cash2-tip{
		text-align: center;
		font-size: 12px;
		color: #FE4744;
		padding-bottom:20px;
	}
	
	.cash2-list {
		display: flex;
		flex-direction: column;
		height: 320px;
		margin-bottom: 80px;
	}
	
	.list-item {
		color: #30344C;
		font-size: 14px;
		padding: 15px 0;
		border-bottom: 1px solid #D9D9DB;
		text-align: center;
	}
	
	.list-item:nth-of-type(1) {
		border-top: 1px solid #D9D9DB;
	}
</style>
